<script setup>
import {onMounted, ref} from "vue";
import temblorRegion from "@/api/temblor/temblorRegion.js";
import {Message} from "@arco-design/web-vue";

const visible = ref(false);

const handleOk = () => {
  temblorRegion.save(formData.value).then(res => {
    if (res.code === 200) {
      formData.value = {}
      Message.success("保存成功");
      getTableData();

    } else {
      Message.error(res.msg);
    }
  })
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
}
const formData = ref({
  village_id: 0,
  name: '',
  duty: "",
  phone: ""
});
onMounted(() => {
  temblorRegion.tree().then(res => {
    tree.value = res.data;
  })
  getTableData();
})
const data = ref([])
const pageData = ref({
  page: 1,
  limit: 10,
  total: 0
})
const columns = [
  {
    title: '序号',
    dataIndex: "id"
  },
  {
    title: "名字",
    dataIndex: "name"
  },
  {
    title: "电话",
    dataIndex: "phone"
  },
  {
    title: "县区",
    dataIndex: "county.name"
  },
  {
    title: "乡镇",
    dataIndex: "towns.name"
  },
  {
    title: "村",
    dataIndex: "village.name"
  },
  {
    title: '操作',
    slotName: 'optional'
  }
];
const getTableData = () => {
  temblorRegion.list({...pageData.value, ...search.value}).then(res => {
    pageData.value.page = res.data.page;
    pageData.value.limit = res.data.limit;
    pageData.value.total = res.data.total;
    data.value = res.data.list;
  })
}
const title = ref('Title');
const tree = ref([])
const editUser = (val) => {
  temblorRegion.tree().then(res => {
    tree.value = res.data;
  })
  if (val != null) {
    title.value = '编辑人员';
    formData.value = val;
  } else {
    title.value = '新增人员';
  }
  visible.value = true;
}
const search = ref({
  name: '',
  duty: '',
  phone: '',
  region: 0,
})
const reset = () => {
  search.value = {}
  getTableData();
}
const changePage = (page) => {
  pageData.value.page = page;
  getTableData()
}
const changeLimit = (limit) => {
  pageData.value.limit = limit;
  getTableData()
}
const deleteUser = (id) => {
  temblorRegion.del({id: id}).then(res => {
    if (res.code === 200) {
      Message.success("删除成功");
      getTableData();
    } else {
      Message.error(res.msg);
    }
  })
}
</script>

<template>
  <a-button type="primary" @click="editUser(null)">
    新增人员
  </a-button>
  <a-form style="margin-top: 1rem" layout="inline">
    <a-form-item label="根据区域查询">
      <a-cascader :options="tree" v-model="search.region"
                  style="width: 200px"
                  placeholder="请选择所属区域 ..." check-strictly/>
    </a-form-item>
    <a-form-item label="姓名">
      <a-input v-model="search.name"></a-input>
    </a-form-item>
    <a-form-item label="职务">
      <a-input v-model="search.duty"></a-input>
    </a-form-item>
    <a-form-item label="电话">
      <a-input v-model="search.phone"></a-input>
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button status="success" @click="getTableData">查询</a-button>
        <a-button status="danger" @click="reset">重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
  <a-table :columns="columns" :data="data">
    <template #optional="{ record }">
      <a-space>
        <a-button @click="editUser(record)" type="primary">修改</a-button>
        <a-popconfirm content="确定删除吗?" type="error" @ok="deleteUser(record.id)">
          <a-button type="primary" status="danger">删除</a-button>
        </a-popconfirm>
      </a-space>
    </template>
  </a-table>
  <a-pagination
      @change="changePage"
      @page-size-change="changeLimit"
      :total="pageData.total" :current="pageData.page" :page-size="pageData.limit" show-page-size/>
  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      {{ title }}
    </template>
    <div>
      <a-form :model="formData">
        <a-form-item field="name" label="名字">
          <a-input v-model="formData.name"/>
        </a-form-item>
        <a-form-item field="name" label="职务">
          <a-input v-model="formData.duty"/>
        </a-form-item>
        <a-form-item field="name" label="电话">
          <a-input v-model="formData.phone"/>
        </a-form-item>
        <a-form-item label="所属区域">
          <a-cascader :options="tree" v-model="formData.village_id"
                      placeholder="请选择所属区域 ..." check-strictly/>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<style scoped>

</style>